<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th rowspan="2" style="vertical-align: middle">{{ trans('user.username') }}</th>
            @foreach($aDate as $date)
            <th class="text-center">{{{ CNamHoa::ConvertDate($date) }}}</th>
            @endforeach
        </tr>
        <tr>
            @foreach($aDate as $date)
            <th>
                <span class="col-md-6 pull-left">
                    {{ trans('options.LE') }}
                </span>
                <span class="col-md-6 pull-right" style="text-align: right; white-space: nowrap">
                    {{ trans('options.HOC') }}
                </span>
            </th>
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach($aUser as $User)
        <tr>
            <td>{{{ $User->username }}}</td>
            @foreach($aDate as $date)
            <td class="btn-update" user_id="{{{$User->id}}}" date="{{$date}}" style="cursor: pointer">
                <div class="tooltips" data-original-title="{{{$User->username}}} {{$date}}" data-placement="top">
                    <span class="col-md-6 pull-left">
                        {{isset($aUserCore[$date][$User->id]['LE']) ? $aUserCore[$date][$User->id]['LE']->score : '&nbsp;' }}
                    </span>
                    <span class="col-md-6 pull-right" style="text-align: right">
                        {{isset($aUserCore[$date][$User->id]['HOC']) ? $aUserCore[$date][$User->id]['HOC']->score : '&nbsp;' }}
                    </span>
                </div>
            </td>
            @endforeach
        </tr>
        @endforeach
    </tbody>
</table>
<script type="text/javascript">
    jQuery('.tooltips').tooltip();

    $.fn.modal.defaults.spinner = $.fn.modalmanager.defaults.spinner =
            '<div class="loading-spinner" style="width: 200px; margin-left: -100px;">' +
            '<div class="progress progress-striped active">' +
            '<div class="progress-bar" style="width: 100%;"></div>' +
            '</div>' +
            '</div>';

    $.fn.modalmanager.defaults.resize = true;

    var $modal = $('#ajax-modal');

    $('table td.btn-update').click(function() {
        $('body').modalmanager('loading');

        var obj = {};
        obj['user_id'] = $(this).attr('user_id');
        obj['date'] = $(this).attr('date');

        $modal.load('{{route("attendance-form")}}', obj, function() {
            $modal.modal().on("hidden", function() {
                $modal.empty();
            });

            $modal.find('.btn-attendance-update').click(function() {

                var form = $('#form-attendance');
                var error = $('.alert-danger', form);
                var success = $('.alert-success', form);

                $.ajax({
                    url: form.attr('action'),
                    type: form.attr('method'),
                    data: form.serialize(),
                    dataType: 'json'
                }).done(function(response) {
                    if (response.status == 200) {

                        $('td[user_id="' + response.user_id + '"][date="' + response.date + '"]')
                                .find('.pull-left').html(response.le).end()
                                .find('.pull-right').html(response.hoc).end();

                        $('.btn-close-modal').click();
                    }
                    else {
                        error.find('span').text(response.message);
                        error.show();
                        success.hide();
                    }
                }).fail(function() {
                    error.find('span').text('Check Your Connection.');
                    error.show();
                    success.hide();
                });
            });
        }, 'json');
    });
</script>